<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TEST_JQUERY 文档就绪函数</title>
		<script src="../JQuery/jquery-3.6.0.min.js"></script>
		<script>
			// 练习文档就绪函数的写法
			$(document).ready(function() {
				function getColor() {
					return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
				}
				$("button").click(function() {
					//语法：$("p").css("background-color","yellow");
					$("#h01").css("color", getColor());
				})
				$("button#b1").click(function() {
					$("span").css("color", getColor());
				})

			});
			$(function() {
				function getColor() {
					return "#" + Math.floor(Math.random() * 0xffffff).toString(16);
				}
				//练习1 点击隐藏
				$("#d1").click(function() {
					$("#p1").hide();
				})
				//练习2双击class为dd的元素，给div设置背景色
				$(".dd").dblclick(function() {
					$("div#div0001").css("background-color", getColor());
				})
				//练习3：鼠标进入 id="d1"的div 隐藏有href属性的元素
				$("div#d1").mouseenter(function() {
					$("[href='#']").hide();
				})
				$("div#d1").mouseout(function() {
					$("[href]").show();
				})


			});
			$(document).ready(function() {
				$("#b3").click(function() {
					$("#h02").css("font-size", Math.random() * 20);
				})
			})
			$(document).ready(function() {

			})
			$(function() {
				$()
			})
			$(document).ready(function() {

			})
			$(document).ready(function() {

			})
			$(function() {

			})
			$(document).ready(function() {

			})
			$(document).ready(function() {

			})
			$(document).ready(function() {

			})
		</script>
	</head>
	<body>
		<h1 id="h01">h01</h1>
		<h1 id="h02">h02</h1>
		<h1 id="h03">h03</h1>
		<h1 id="">h00000000000</h1>
		<p id="p1">pppppppp</p>
		<span>spannnnnn</span>

		<a href="#">这是链接</a>
		<div id="d1">这是d1</div>
		<div id="div0001">
			div0001
		</div>
		<div>
			<button id="b1">button1</button>
			<button id="d1" class="dd">button2</button>
			<button id="b3" class="dd">button3</button>
		</div>
	</body>
</html>
